<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="../bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="../css/shopGuanLi.css">
</head>

<body>
    <div>
        <div>
            <div class="page-header" style="margin-left: 100px;">
                <div class="panel-body">
                    <span class="glyphicon glyphicon-th-large" style="display:inline"></span>
                    <p style="font-size: large;display:inline">商品管理</p>
                </div>
            </div>
        </div>
        <div>
            <nav>
                <div class="container-fluid">
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="padding-left: 90px;">
                        <ul class="nav navbar-nav GuanLi_j-nav">
                            <li style="padding-left: 3px;">                     <button href="#" type="button;" class="btn btn-primary">添加商品种类</button></li>   
                            <li style="padding-left: 3px;">                     <button href="#" type="button" class="btn btn-success">查看商品类别</button></li>
                            <li style="padding-left: 3px;">                     <button href="#" type="button" class="btn btn-primary">添加商品</button></li>
                            <li  class="active" style= "padding-left: 3px;">     <button href="#" type="button" class="btn btn-success">查看商品</button></li>
                        </ul>
                        <div >
                            <ul class="nav navbar-nav navbar-right">
                                <li class="dropdown">
                                    <a href="#" class="-toggle" data-toggle="dropdown" role="button">搜索商品</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <div class="context" style="padding-left: 100px;">
            <div class="right pull-left">
                <div class="con  con1 clearfix">
                    <div>
                        <div style="clear: both;">
                            <ul class="nav nav-tabs" role="tablist">
                                <li role="presentation" class="active"> <a href="#one" role="tab" data-toggle="tab">添加一级类别</a></li>
                                <li role="presentation">                <a href="#two" role="tab" data-toggle="tab">添加二级类别</a></li>
                                <div style="display:inline"><a style="margin-left: 800px;">导入Excel文件</a></div>
                              </ul>
                        </div>
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="one">
                                <form class="navbar-form navbar-left" role="search">
                                    <div>
                                        <div style="display:inline">
                                            <label>商品类名</label>
                                            <div class="form-group">
                                               <input type="text" class="form-control" placeholder="请输入一级商品类名">
                                            </div>
                                        </div>
                                        <button type="button" class="btn btn-primary">添加</button>
                                    </div>
                                </form>
                            </div>
                            <div role="tabpanel" class="tab-pane" id="two">
                                <form class="navbar-form navbar-left" role="search">
                                    <div>
                                        <div style="display:inline;">
                                            <label>选择一级类名</label>
                                            
                                            <div class="form-group">
                                                <div class="dropdown">
                                                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"   style="width: 200px;">
                                                      请选择一级商品类名
                                                      <span class="glyphicon glyphicon-chevron-down"></span>
                                                    </button>
                                                  </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="margin-top: 20px;">
                                        <div style="display:inline;">
                                            <label>二级商品类名</label>
                                            <div class="form-group">
                                                <div class="dropdown">
                                                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"   style="width: 200px;">
                                                        请选择二级商品类名
                                                      <span class="glyphicon glyphicon-chevron-down"></span>
                                                    </button>
                                                  </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <br>
                                <div style="clear: both;display:block;padding-top: 20px; padding-left: 50px;">
                                    <button type="button" class="btn btn-primary" style="width: 200px;">添加</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="con con2 clearfix">
                <form class="navbar-form navbar-left" role="search">
                    <div>
                        <div style="display:inline;">
                            <label>选择一级类名</label>
                            
                            <div class="form-group">
                                <div class="dropdown">
                                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"   style="width: 200px;">
                                      请选择一级商品类名
                                      <span class="glyphicon glyphicon-chevron-down"></span>
                                    </button>
                                  </div>
                            </div>
                        </div>
                    </div>
                    <div style="margin-top: 10px;">
                        <div style="display:inline;">
                            <label>二级商品类名</label>
                            <div class="form-group">
                                <div class="dropdown">
                                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"   style="width: 200px;">
                                        请选择二级商品类名
                                      <span class="glyphicon glyphicon-chevron-down"></span>
                                    </button>
                                  </div>
                            </div>
                        </div>
                    </div>
                </form>
                <table class="table" style="margin-top: 0px;">
                    <thead>
                        <tr>
                            <th>商品类别ID</th>
                            <th>商品类别名称</th>
                            <th>级别</th>
                            <th>父类级别</th>
                            <th>描述</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>100001</td>
                            <td>粮油</td>
                            <td>一级</td>
                            <td>无</td>
                            <td>包括粮食、食用油等</td>
                            <td></td>
                            <td><a class="btn">修改</a><a class="btn">锁定</a></td>
                        </tr>
                        <tr>
                            <td>100002</td>
                            <td>调味品</td>
                            <td>二级</td>
                            <td>粮油</td>
                            <td>上海</td>
                            <td></td>
                            <td><a class="btn">修改</a><a class="btn">锁定</a></td>
                        </tr>
                        <tr>
                            <td>100002</td>
                            <td>电器</td>
                            <td>一级</td>
                            <td>无</td>
                            <td>深圳</td>
                            <td></td>
                            <td><a class="btn">修改</a><a class="btn">锁定</a></td>
                        </tr>
                        <tr>
                            <td>100004</td>
                            <td>家具</td>
                            <td>一级</td>
                            <td>无</td>
                            <td>杭州</td>
                            <td></td>
                            <td><a class="btn">修改</a><a class="btn">锁定</a></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="con con3 clearfix" style="width: 1150px;">
                <div style="margin-top: -25px;">
                    <a>导入Excel文件</a>
                </div>
                <br>
                <div>
                    <form class="navbar-form navbar-left" role="search">
                        <div>
                            <div style="display:inline">
                                <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:red;">* </span>条码</label>
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="请输入内容">
                                </div>
                            </div>
                            <div style="display:inline;margin-left: 100px;">
                                <label><span style="color:red;">* </span>一级商品类别</label>
                                <div class="form-group">
                                    <div class="dropdown">
                                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"  style="width: 200px;">
                                            请选择
                                            <span class="glyphicon glyphicon-chevron-down"></span>
                                        </button>
                                        </div>
                                </div>
                            </div>
                            <div style="display:inline;margin-left: 100px;">
                                <label><span style="color:red;">* </span>二级商品类别</label>
                                
                                <div class="form-group">
                                    <div class="dropdown">
                                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"   style="width: 200px;">
                                            选项一
                                            <span class="glyphicon glyphicon-chevron-down"></span>
                                        </button>
                                        </div>
                                </div>
                            </div>
                        </div>
                        <div style="margin-top: 50px;">
                            <div style="display:inline">
                                <label><span style="color:red;">* </span>商品名称</label>
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="请输入内容">
                                </div>
                            </div>
        
                            <div style="display:inline;margin-left: 100px;">
                                <label class="sglxrequired">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:red;">* </span>单位</label>
        
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="请输入内容">
                                    </div>
                            </div>
                            <div style="display:inline;margin-left: 100px;">
                                <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:red;">* </span>当前售价</label>
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="请输入内容">
                                    </div>
                            </div>
                        </div>
                    </form>
                </div>
                <br>
                <div style="clear: both;display:block;padding-top: 60px; padding-left: 500px;">
                    <button type="button" class="btn btn-primary btn-lg">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;添加&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
                </div>
            </div>
            <div class="con active con4 clearfix">
                <div id="mytable">
                    <button type="button" class="btn btn-info addbtn" data-toggle="modal" data-target="#addshop">添加商品</button>
                    <div class="table-responsive">
                      <table class="table table-bordered">
                        <thead>
                          <tr>
                            <th>流水号</th>
                            <th>条码</th>
                            <th>商品名称</th>
                            <th>当前售价</th>
                            <th>进货数量</th>
                            <th>一级类别</th>
                            <th>二级类别</th>
                            <th>操作</th>
                        </tr>
                      </thead>
                        <tbody id="someShopTable">
                        </tbody>
                      </table>
                      <nav style="text-align: center;" aria-label="Page navigation">
                        <ul class="pagination">
                          <li id="prev" onclick="prevPage()">
                            <a href="#" aria-label="Previous">
                              <span aria-hidden="true">&laquo;</span>
                            </a>
                          </li>
                          <li id="next" onclick="nextPage()">
                            <a href="#" aria-label="Next">
                              <span aria-hidden="true">&raquo;</span>
                            </a>
                          </li>
                        </ul>
                      </nav>
                    </div>
                  </div>
                  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                    <div class="modal-dialog" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                              aria-hidden="true">&times;</span></button>
                          <h4 class="modal-title" id="exampleModalLabel">修改商品信息</h4>
                        </div>
                        <div class="modal-body">
                          <form>
                            <div class="form-group">
                              <label for="shopId" class="control-label">流水号:</label>
                              <input type="text" class="form-control" disabled id="shopId">
                            </div>
                            <div class="form-group">
                              <label for="shopTwoid" class="control-label">条码:</label>
                              <input type="text" class="form-control" id="shopTwoid">
                            </div>
                            <div class="form-group">
                              <label for="shopName" class="control-label">商品名称:</label>
                              <input type="text" class="form-control" id="shopName">
                            </div>
                            <div class="form-group">
                              <label for="shopPrice" class="control-label">当前售价:</label>
                              <input type="text" class="form-control" id="shopPrice">
                            </div>
                            <div class="form-group">
                              <label for="shopNumber" class="control-label">进货数量:</label>
                              <input type="text" class="form-control" id="shopNumber">
                            </div>
                            <div class="form-group">
                              <label for="shopSecond" class="control-label">一级类别:</label>
                              <input type="text" class="form-control" id="shopSecond">
                            </div>
                            <div class="form-group">
                              <label for="shopFirst" class="control-label">二级类别:</label>
                              <input type="text" class="form-control" id="shopFirst">
                            </div>
                          </form>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                          <button type="button" class="btn btn-primary" onclick="changeshop()">确认修改</button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="modal fade" id="addshop" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                    <div class="modal-dialog" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                              aria-hidden="true">&times;</span></button>
                          <h4 class="modal-title" id="exampleModalLabel">添加商品</h4>
                        </div>
                        <div class="modal-body">
                          <form>
                            <div class="form-group">
                              <label for="shopId" class="control-label">流水号:</label>
                              <input type="text" class="form-control" disabled id="addshopId">
                            </div>
                            <div class="form-group">
                              <label for="shopTwoid" class="control-label">条码:</label>
                              <input type="text" class="form-control" id="addshopTwoid">
                            </div>
                            <div class="form-group">
                              <label for="shopName" class="control-label">商品名称:</label>
                              <input type="text" class="form-control" id="addshopName">
                            </div>
                            <div class="form-group">
                              <label for="shopPrice" class="control-label">当前售价:</label>
                              <input type="text" class="form-control" id="addshopPrice">
                            </div>
                            <div class="form-group">
                              <label for="shopAge" class="control-label">进货数量:</label>
                              <input type="text" class="form-control" id="addshopNumber">
                            </div>
                            <div class="form-group">
                              <label for="shopSecond" class="control-label">一级类别:</label>
                              <input type="text" class="form-control" id="addshopSecond">
                            </div>
                            <div class="form-group">
                              <label for="shopFirst" class="control-label">二级类别:</label>
                              <input type="text" class="form-control" id="addshopFirst">
                            </div>
                          </form>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                          <button type="button" class="btn btn-primary" onclick="addsomeShop()">确认添加</button>
                        </div>
                      </div>
                    </div>
                  </div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="../bootstrap-3.4.1-dist/js/jquery-3.4.1.min.js"></script>
<script src="../bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<script src="../javaScript/shopGuanLi.js"></script>